<template>
  <div class="bill-header">
    <div class="top">
        <el-select v-model="lastValue" placeholder="请选择年份" style="width:30vw" @change="updateYear">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <div class="title">
            账单
        </div>
    </div>
    <div class="middle">
        <div class="font">
            结余
        </div>
        <div class="total">
            <span>{{totalMoney.toFixed(2)}}</span>
        </div>
    </div>

    <div class="bottom">
        <div class="get">
            收入<span style="margin-left:2px;font-size:20px;">{{totalGet.toFixed(2)}}</span>
        </div>
        <div class="pay">
            支出<span style="margin-left:2px;font-size:20px;">{{totalPay.toFixed(2)}}</span>
        </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name:'BillHeader',
    data() {
        return {
            options: [{
            value: "2024",
            label: '2024年'
            }, {
            value: '2023',
            label: '2023年'
            }, {
            value: '2022',
            label: '2022年'
            }, {
            value: '2021',
            label: '2021年'
            }, {
            value: '2020',
            label: '2020年'
            }, {
            value: '2019',
            label: '2019年'
            }, {
            value: '2018',
            label: '2018年'
            },{
            value: '2017',
            label: '2017年'
            },{
            value: '2016',
            label: '2016年'
            }],
            lastValue:null,
        }
    },
    computed:{
      ...mapState('UserBill',['year','monthlyInfo']),
      totalGet(){
        return this.monthlyInfo.reduce((prev,value)=>{
            prev += value.get;
            return prev;
        },0);
      },
      totalPay(){
        return this.monthlyInfo.reduce((prev,value)=>{
            prev += value.pay;
            return prev;
        },0);
      },
      totalMoney(){
        return this.totalGet-this.totalPay;
      }
    },

    methods:{
        updateYear(){
            this.$store.dispatch('UserBill/updateYear',this.lastValue);
        }
    },
    watch:{
        year(){
            this.lastValue = this.year;
        }
    },

    mounted(){
        this.lastValue = this.year;
    }
}
</script>

<style scoped>
    .bill-header{
        height: 30vh;
        background-color: royalblue;
    }

    .top{
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        margin-left: 10px;
        height: 10vh;
    }
    .year-selector{
        height: 5vh;
    }
    .title{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 30px;
        color: white;
    }

    .middle{
        display: flex;
        flex-direction:column;
        flex-wrap: nowrap;
        align-items: center;
        height: 13vh;
    }

    .font{
        color: white;
    }

    .total{
        flex: 1;
        position: relative;
    }

    .total span{
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        font-size: 40px;
        color: white;
    }

    .bottom{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 7vh;
        color:white
    }

    .get{
        width: 50%;
        height: 3vh;
        margin-top: 2vh;
        border-right: solid 2px white;
        text-align: center;
    }
    .pay{
        width: 50%;
        height: 3vh;
        margin-top: 2vh;
        text-align: center;
    }
</style>